<template>
	<view>
		<view class="logo">
			<image src="@/static/logo.png" mode=""></image>
		</view>
		<view class="logo_text">
			<text>欢迎登录 京猫国际</text>
		</view>
		<view class="from">
			<u-form :model="userInfo">
				<u-form-item label="账号" prop="userInfo.userName" borderBottom>
					<u--input placeholder="请输入内容" clearable v-model="userInfo.userName"></u--input>
				</u-form-item>
				<u-form-item label="密码" prop="userInfo.password" borderBottom>
					<u--input type="Password" placeholder="请输入内容" v-model="userInfo.password" clearable></u--input>
				</u-form-item>
				<u-form-item>

					<u-button style="margin-top:15rpx ;" type="primary" @click="UserLoginHandler">登录</u-button>


				</u-form-item>
			</u-form>

		</view>
		<view class="reg">
			<u--text type="success" text="去注册" @click="goRegBtn"></u--text>
		</view>
		<view class="">
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
import {UserLoginAPI} from "../../services/api.js"
	import {
		settoken
	} from "../../utils/tools"
	export default {
		data() {
			return {
				userInfo: {
					userName: "",
					password: ""
				},
				list: {
					type: '',
					title: '',
					message: "",
				},
			}
		},
		methods: {
			showToast(params) {
				this.$refs.uToast.show({
					...params,
				})
			},
			goRegBtn() {
				uni.navigateTo({
					url: '/pages/reg/reg'
				})
			},
			UserLoginHandler() {
				UserLoginAPI(this.userInfo).then((res) => {
					this.list.message = res.errorMessage
					

					if (res.success) {
						this.list.message = res.errorMessage + "，即将跳转首页"
						localStorage.setItem('token', res.data)
						this.list.type = "success"
						settoken(res.data)
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/index/index"
							})
						},500)
					} else {
						this.list.message = res.errorMessage
						this.list.type = "error"
					}
					this.showToast(this.list)
					setTimeout(()=>{
					this.userInfo.userName = ""
					this.userInfo.password = ""
						
					},500)
				})
			},
		},
		onLoad() {

		}
	}
</script>

<style>
	.logo {
		padding: 75rpx 0 20rpx 75rpx;

		image {
			width: 62rpx;
			height: 62rpx;
		}
	}

	.logo_text {
		font-weight: bold;
		padding: 0 0 20rpx 75rpx;
	}

	.from {
		width: 75%;
		padding-left: 75rpx;
	}

	.reg {
		padding-left: 75rpx;
	}
</style>